<style lang="scss" type="stylesheet/scss" scoped>
.as-code {
  border-radius: 4px;
  background: #282c34;
  // background: mix(white, #1368dd, 90%);
  padding: 20px 20px 20px 10px;
  color: #333;
  line-height: 2;
  font-size: 14px;
  box-sizing: border-box;
  position: relative;
  &__inner {
    box-sizing: border-box;
    border-radius: 0;
    margin: 0;
  }
  width: 100%;
  overflow-x: auto;
}
.warpper {
  position: relative;
}
.copy {
  position: absolute;
  right: 0;
  top: 0;
  color: white;
  opacity: 0.2;
  cursor: pointer;
  padding: 10px;
}
</style>
<style lang='scss' type='stylesheet/scss'>
.hljs {
  &,
  span {
    font-family: Menlo, Monaco, Consolas, Courier, monospace !important;
  }
  color: white;
}
.hljs-keyword {
  color: #25b0f1;
}
.hljs-function {
  color: #756bb1;
}
.hljs-tag {
  color: mix(white, #f96375, 00%);
}
.hljs-name {
  color: mix(white, #f96375, 00%);
}
.hljs-attr {
  color: #e09863;
}
.hljs-tag {
  color: white;
}
.hljs-string {
  color: #f96375;
}
.hljs-literal {
  color: #f96375;
}
</style>
<template>
  <pre class="as-code"
       :class="[{'as-code__inner':inner}]">
    <code :class="`language-${lang}`" v-text="text"></code>
  </pre>
</template>

<script type="text/ecmascript-6">
export default {
  props: {
    text: String,
    inner: Boolean,
    lang: {
      type: String,
      default: "javascript"
    }
  },
  name: "AsCode",
  data() {
    return {
      isShow: false
    };
  },
  mounted() {
    document.querySelectorAll("pre code").forEach(block => {
      hljs.highlightBlock(block);
    });
    this.isShow = true;
  },
  updated() {
    document.querySelectorAll("pre code").forEach(block => {
      hljs.highlightBlock(block);
    });
  },
  methods: {
    copy() {
      let input = document.createElement("input");
      input.style.opacity = 0;
      document.body.append(input);
      input.value = this.text;
      input.select();
      document.execCommand("Copy");
      document.body.removeChild(input);

      this.$message.success("拷贝成功！");
    }
  }
};
</script>
